<template>
  <div class="searchvisitors"  style="overflow: hidden;">
    <el-row class="searchvisitors-row">
      <el-col :span="24" >
        <!--<el-select style="margin-right: 5px;" size="small" :clearable="true" v-model="deviceSn" @change="submitSearch" placeholder="请选择设备">-->
          <!--<el-option-->
                  <!--v-for="item in deviceData"-->
                  <!--:key="item.sn"-->
                  <!--:label="item.dv_name"-->
                  <!--:value="item.sn">-->
          <!--</el-option>-->
        <!--</el-select>-->
        <el-cascader
                size="small"
                style="margin-right: 10px;width: 240px;"
                placeholder="选择对应景区下设备"
                :options="deviceData"
                @change="handleChangeTree"
                filterable
                :clearable="true"
                :active-item-change="false"
                :show-all-levels="false"
        ></el-cascader>
        <!--<el-button type="primary" >查询</el-button>-->
        <!--<el-date-picker-->
                <!--v-model="timeRange"-->
                <!--type="daterange"-->
                <!--size="small"-->
                <!--:picker-options="timePickerOptions"-->
                <!--range-separator="至"-->
                <!--start-placeholder="开始日期"-->
                <!--end-placeholder="结束日期"-->
                <!--value-format="yyyy-MM-dd"-->
                <!--@change="submitSearch"-->
                <!--align="right">-->
        <!--</el-date-picker>-->
      </el-col>
    </el-row>
    <div class="maps">
      <map-maps v-on:changeData="changeData" :showBusiness="false" :showSearchBox="false" :model="false" :makers="markers" :number="1"></map-maps>
      <div class="maptop"></div>
      <div class="radar">
        <div class="radartext">{{pageInfo.total}}</div>
        <transition-group tag="ul" name="fade">
          <li  v-for="(items,index) in dataset" :key="index+1">
            <div class="dot" :style="{left: items.left + 'px', top: items.right + 'px'}"></div>
          </li>
        </transition-group>
        <div class="circleone circle">
          <div class="circletwo circle"></div>
        </div>
      </div>
    </div>
    <div>
      <!--<div class="visitorlist" v-if="isShowSearch">-->
      <!--<template>-->
      <!--<el-carousel height="200px" arrow="hover" indicator-position="none" :autoplay="false">-->
      <!--<el-carousel-item v-for="index1 in listNumber" :key="index1">-->
      <!--<div class="visitorlist-box">-->
      <!--<el-row :gutter="20">-->
      <!--<el-col :span="3" v-for="(items,index2) in probelist[index1-1]" :key="index2" style="padding-bottom: 5px">-->
      <!--<div class="list">-->
      <!--<div class="list-header"><img :src="headImg[0]" alt="" ></div>-->
      <!--<div class="list-content" style="color: #333;font-size: 14px">{{items.updated_at | dateFrm}}</div>-->
      <!--<div  style="color: #333;font-size: 14px;padding: 3px 0 0 0;">{{items.distance}}</div>-->
      <!--<div class="ellipsis"  style="color: #333;font-size: 12px;padding: 3px 15px;">{{items.type?items.type:'无'}}</div>-->
      <!--<div class="list-detail"><button class="list-btn" @click="lookDetail(items.mac)">查看详情</button></div>-->
      <!--</div>-->
      <!--</el-col>-->
      <!--</el-row>-->
      <!--</div>-->
      <!--</el-carousel-item>-->
      <!--</el-carousel>-->
      <!--</template>-->
      <!--</div>-->
    </div>
    <div class="mt-3">
      <el-table
              :data="macData"
              v-loading="loading"
              align="center"
              :element-loading-text="loadText"
              :header-cell-style="tableHeaderColor"
              stripe
              style="width: 100%">
        <el-table-column
                prop="dv_name"
                align="center"
                label="设备名"
        >
        </el-table-column>
        <el-table-column
                prop="mac"
                align="center"
                label="mac"
        >
        </el-table-column>
        <el-table-column
                prop="type"
                align="center"
                label="机型"
        >
        </el-table-column>
        <el-table-column
                prop="time"
                align="center"
                sortable
                label="驻留时间(s)"
        >
        </el-table-column>
        <!--<el-table-column-->
                <!--prop="distance"-->
                <!--align="center"-->
                <!--sortable-->
                <!--label="距离(m)"-->
        <!--&gt;-->
        <!--</el-table-column>-->
        <el-table-column
                align="center"
                label="添加时间"
        >
          <template slot-scope="scope">
            <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(0,11):'无'}}</div>
            <div align="center">{{scope.row['created_at']?scope.row['created_at'].slice(11):'无'}}</div>
          </template>
        </el-table-column>
        <el-table-column
                align="center"
                label="最后访问时间"
        >
          <template slot-scope="scope">
            <div align="center">{{scope.row['updated_at']?scope.row['updated_at'].slice(0,11):'无'}}</div>
            <div align="center">{{scope.row['updated_at']?scope.row['updated_at'].slice(11):'无'}}</div>
          </template>
        </el-table-column>
      </el-table>
      <div class="mt-3 float-right">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageInfo.current_page"
                :page-size="pageInfo.per_page"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageInfo.total">
        </el-pagination>
      </div>
    </div>
    <div class="tip" @click="dialogVisible=true"><div>查看</div><div>设备</div></div>
    <el-dialog
            title="设备情况"
            :visible.sync="dialogVisible"
            width="500px"
            :close-on-click-modal="false">
      <div v-if="badDeviceData && badDeviceData.length>0">
        <div v-for="(item,index) in badDeviceData" >
          <div style="color: #000;font-size: 16px">{{index+1}} 、景区：{{item.tr_name}}({{item.tr_id}})</div>
          <div class="devices" v-for="item2 in item.devices ">
            <span>{{item2.sn}}</span>
            <span>{{item2.type_cn}}</span>
            <span>{{item2.unUploadTime}}</span>
          </div>
        </div>
      </div>
      <div v-else style="text-align: center;margin: 10px 0">无数据</div>
      <span slot="footer" class="dialog-footer">
    <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import MapMaps from '../../components/map/maps'
  import moment from 'moment'
    export default {
        name: "order-create",
        components: {
            MapMaps
        },
        data() {
            return {
                dialogVisible:false,
                eqTableData: [
                {
                    id: 1,
                    mac: 'b83765ace2b9',
                    phone_type: 'OPPO',
                    step_time: '30000',
                    distance: '600',
                    created_at: '2019.02.22 10:10:10',
                    last_created_at: '2019.02.22 10:10:10',
                },
                {
                    id: 2,
                    mac: 'b83765ace2b9',
                    phone_type: 'OPPO',
                    step_time: '35000',
                    distance: '500',
                    created_at: '2019.02.22 10:10:10',
                    last_created_at: '2019.02.22 10:10:10',
                }
            ],
                saveBinding:[], //首次保存的marker值
                markers:[], // 地图多点标记
                // {
                //     position: [121.5273285, 31.21515044]
                // }
                lnglat:[104.090933, 30.621318],
                timeRange:null,
                routerMac:'',
                timePickerOptions: {
                    shortcuts: [{
                        text: '最近一天',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                dataset:[],
                circleLeft:0,
                circleRight:0,
                circleNumber:30,
                api:'media/mac/?pageSize=50',
                total:0,
                showEquipmentDialog:false,
                mac:null,
                showBuyDialog:false,
                showBindDialog:false,
                showBagDialog:false,
                input:null,
                activeName: 'first',
                probelist:[],
                listNumber:0,
                binding:[],//探知器列表
                headImg:[
                    "http://p98adskah.bkt.clouddn.com/images/2018-06-27/cziGrJMpW5TTjVPmdE4iIFzsBW4VcPTLf88V8uqI.png?imageView2/0/w/1000/h/1000",
                    "http://p98adskah.bkt.clouddn.com/images/2018-06-27/UaXh6sWKygFbZQBB9EUfCdjgfbqx8hHHkRJmLyyP.png?imageView2/0/w/1000/h/1000"
                ],
                query:{},
                interval:null,
                interval1:null,
                circlenumbers:null,
                isShowSearch:false,
                deviceData: [],
                macData: [],
                pageInfo: {
                    per_page: 10,
                    total: 0,
                    current_page: 1
                },
                loadText: '数据加载中',
                loading: false,
                deviceSn: '',
                searchStr: '',
                times: null,
                badApi:'api/auth/checkDevicesUpload',
                badDeviceData:[],
                interval2:null,
                badData:''
            }
        },
        filters:{
            dateFrm:function (el) {
                return moment(el).format('YYYY-MM-DD HH:mm:ss');
            }
        },
        created() {
            // this.setTime();  // 设置初始时间
            this.getDeviceList();  // 设备
            this.getDataList(''); // 获取mac
            setTimeout(()=>{
                this.getBadDeviceList(); // 获取bad设备
            },2000);

            this.times = setInterval(()=>{
              if (this.deviceSn) {
                  this.getDataList(this.deviceSn);
              }
            },10000);
            this.interval = setInterval(()=>{
                this.setRondom();
            },3000);
            this.interval1 = setInterval(()=>{
                this.deleteCircle();
            },5000);
            this.interval2 = setInterval(()=>{
                this.getBadDeviceList();
            },1000*60);
        },
        beforeDestroy: function () {
            clearInterval(this.interval);
            clearInterval(this.times);
            clearInterval(this.interval1);
            clearInterval(this.interval2);
        },
        methods: {
            getBadDeviceList() {
                this.badData = '';
                this.$http.get(this.badApi)
                    .then((result) => {
                        if (result.status_code == 200) {
                            this.badDeviceData = result.data;
                            if (this.badDeviceData && this.badDeviceData.length>0) {
                                this.badDeviceData.forEach((item,index)=>{
                                    this.badData += `<h6>${index+1}、景区：${item.tr_name}(${item.tr_id})</h6>`
                                    item.devices.forEach((item2,index2)=>{
                                        this.badData += `<div style="padding-left: 10px">${item2.sn} ${item2.type_cn}</div>`
                                    })
                                });
                                this.$notify({
                                    type:'warning',
                                    title: '设备问题',
                                    duration: 3000,
                                    dangerouslyUseHTMLString: true,
                                    message: this.badData
                                });
                            }

                        } else {
                            this.$message.warning(result.msg);
                        }
                    });
            },
            handleChangeTree(val) {
                if (val && val.length == 3) {
                    this.getDataList(val[2])
                }
                // this.getDataList(sn)
            },
            changeData(value){
                console.info('被传过来的经纬度',value);
            },
            submitSearch() {
                this.pageInfo.current_page = 1;
                this.getDataList(this.deviceSn);
            },
            addConStr() {
                if (this.searchStr.length > 0) {
                    this.searchStr += '&';
                } else {
                    this.searchStr += '?';
                }
            },
            getDeviceList(){
                this.$http.get('api/auth/getDevicesBeLongsToUser?@action=tree')
                    .then((result)=>{
                        if(result.status_code == 200){
                            this.deviceData = result.data;
                        } else {
                            this.$message.warning(result.msg);
                        }
                    });
            },
            getDataList(sn){
                this.loading = true;
                let search;
                if (sn) {
                    search = '?sn=' + sn;
                } else {
                    search = '';
                }
                this.$http.get('api/auth/macList' + search, {
                    params: {
                        pageSize: this.pageInfo.per_page,
                        page: this.pageInfo.current_page
                    }
                })
                    .then((result)=>{
                        if(result.status_code == 200){
                            this.macData = result.data.data;
                            this.pageInfo.total = result.data.total
                        } else {
                            this.$message.warning(result.msg);
                        }
                        this.loading = false;
                    })
                    .catch((err)=>{
                        this.loading = false;
                        this.$message.warning(err.data.msg);
                    })
            },
            setRondom() { //随机出现扫描的探针点
                this.circleNumber = Math.floor((Math.random() * 10) + 10);
                this.circlenumbers += this.circleNumber;
                for(let i=0;i<=this.circleNumber;i++) {
                    this.dataset.push({left:Math.floor(Math.random() * 400),right:Math.floor(Math.random() * 400)});
                }
            },
            deleteCircle() {
                this.dataset.splice(0,this.circlenumbers+3);
                this.circlenumbers = null;
            },
            setTime() {
                const end = new Date();
                const start = new Date();
                end.setTime(end.getTime() + 3600 * 1000 * 24 * 1);
                // this.timeRange = [start,end];
                this.transferDate([start,end])
            },
            transferDate(value){
                let dateList1 = value[0].getFullYear() + '-' + (value[0].getMonth() + 1) + '-' + value[0].getDate() + ' ' + '00:00:00';
                let dateList2 = value[1].getFullYear() + '-' + (value[1].getMonth() + 1) + '-' + value[1].getDate() + ' ' + '00:00:00';
                this.timeRange = [dateList1,dateList2];
                this.submitSearch()
            },
            handleSizeChange(val) {
                this.pageInfo.current_page = 1;
                this.pageInfo.per_page = val;
                this.getDataList(this.deviceSn);
            },
            handleCurrentChange(val) {
                this.pageInfo.current_page = val;
                this.getDataList(this.deviceSn);
            },
            tableHeaderColor({row, column, rowIndex, columnIndex}) {
                if (rowIndex === 0) {
                    return 'background-color: #FAFAFA;color: #000;font-weight: 500;height:54px;font-size:14px'
                }
            }
        }
    }
</script>

<style>
  .searchvisitors .el-carousel__item{
    padding-bottom: 0 !important;
  }
  .searchvisitors .el-carousel__container{
    height: 230px !important;
  }
</style>
<style lang="less" scoped>
  .tip{
    width: 50px;
    height: 50px;
    background: #409EFF;
    color: #fff;
    font-size: 12px;
    text-align: center;
    position: absolute;
    bottom: 20px;
    right: 20px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .tip:hover{
    cursor: pointer;
    background: #3F37FF;
  }
  .devices{
    display: flex;
    justify-content: space-around;
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
  .ellipsis{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
  }
  .searchvisitors{
    width: 100%;
    margin: 5px auto 0;
  }
  .searchvisitors-row{
    padding: 10px 13px 12px 13px;
    background-color: #fff;
  }
  .searchvisitors div.dialog-footer{
    text-align: center !important;
  }
  .visitorlist{
    width: 100%;
    /*height: 200px;*/
    margin-top:10px;
    background-color: rgba(230,230,230,0.3);
  }
  .visitorlist-box{
    width: 85%;
    /*height: 160px;*/
    margin:15px auto;
  }
  .visitorlist-box .list{
    background-color: #fff;
    width: 100%;
    height: auto;
    overflow: hidden;
    text-align: center;
    padding-bottom: 10px;
  }
  .list{
    opacity: 0.9;
    transition: all .2s linear;
    border-radius: 3px;
    width: 100px;
  }
  .list:hover{
    opacity: 1;
    box-shadow: 0 0 15px rgba(200,200,200,0.6);
  }
  .list-header{
    width: 70px;
    height: 70px;
    /*border-radius: 50%;*/
    overflow: hidden;
    /*padding: 8px;*/
    /*background-color: #999;*/
    margin: 10px auto 0;
  }
  .list-header img{

    height: 100%;
  }
  .list-content{
    padding: 3px 10px 0px;
  }
  .list-btn{
    background-color: #fff;
    border: 1px solid #ccc;
    color: #333;
    border-radius: 2px;
    outline: none;
    width: 65%;
    height: 26px;
    font-size: 12px;
    transition: all .1s linear;
    margin-bottom: 5px;
  }
  .list-btn:hover{
    color: #fff;
    border:none;
    background-color: #66B1FF;

  }
  .maps{
    width:100%;
    height: 435px;
    /*padding: 10px 0;*/
    /*background-color:#EEEDDB ;*/
    /*background：url("http://picuser.city8.com/news/image/20141014/%B3%C9%B6%BC%BD%BB%CD%A8%B5%D8%CD%BC2014%B0%E6.jpg");*/
    /*overflow: hidden;*/
    position: relative;
  }
  .maptop{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.1);
  }
  .dot{
    position: absolute;
    z-index: 14;
    /*top: 100px;*/
    /*left: 100px;*/
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #29ea26;
  }
  .circleone{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 260px;
    height: 260px;
    margin: -130px 0 0 -130px;

  }
  .circletwo{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    margin: -50px 0 0 -50px;

  }
  .circle{
    border: 2px solid #169414;
    border-radius: 50%;
  }
  .radar {
    box-shadow: 0px 0px 30px #00ff33;
    background:-webkit-linear-gradient(90deg, rgba(12, 77, 11, 0.5) 49.5%, #4CA44B 50%, #4CA44B 50%, rgba(12, 77, 11, 0.5) 50.2%), -webkit-linear-gradient(0deg, rgba(12, 77, 11, 0.5) 49.5%, #29ea26 50%, #29ea26 50%, rgba(12, 77, 11, 0.5) 50.2%);
    /*background: linear-gradient(90deg, rgba(0, 128, 0, 0.6) 49.5%, #fff 50%, #fff 50%, rgba(0, 128, 0, 0.6) 50.2%), linear-gradient(0deg, rgba(0, 128, 0, 0.6) 49.5%, #fff 50%, #fff 50%, rgba(0, 128, 0, 0.6) 50.2%);*/
    width: 400px;
    height: 400px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: hidden;
  }
  .radartext{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 15;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 400px;
    color: #fff;
    font-size: 70px;

  }
  .radar:after {
    content: ' ';
    display: block;
    background-image: linear-gradient(50deg, rgba(0, 255, 51, 0) 50%, #00ff33 100%);
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;
    animation: radar-beam 5s infinite;
    animation-timing-function: linear;
    transform-origin: bottom right;
    border-radius: 100% 0 0 0;
    z-index: 16;
  }

  @keyframes radar-beam {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes blips {
    14% {
      background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
    }
    14.0002% {
      background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
    }
    25% {
      background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
    }
    26% {
      background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
      opacity: 1;
    }
    100% {
      background: radial-gradient(2vmin circle at 75% 70%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 63% 72%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%), radial-gradient(2vmin circle at 56% 86%, #ffffff 10%, #20ff4d 30%, rgba(255, 255, 255, 0) 100%);
      opacity: 0;
    }
  }
</style>